import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    FlatList,
    StatusBar,
    TextInput,
    ScrollView,
    ActivityIndicator, DeviceEventEmitter
} from 'react-native';
import { base } from "../../../../assets/style";
import CheckBox from 'react-native-check-box'
import LinearGradient from 'react-native-linear-gradient'
import { API } from "../../../../api";
import Confirm from "../../../../components/confirm/Confirm";
import Toast from "react-native-easy-toast";
import { getUserInfoStorage } from "../../../../utils/login";
import { i18n } from "../../../../utils/locales/i18n";

type Props = {};
export default class AddWDAddress extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: i18n.t('wd_wdd_m'),
            headerTintColor: '#0f0f0f',
            headerBackTitle: null
        }
    };
    constructor() {
        super();
        this.state = {
            isChecked: true,
            address: '',
            tempAddress: '',
            isModify: false,
            isAdd: false,
            loading: false,
            rechargeConfirm: false,
            updateConfirm: false,
            remark: '',
            tempRemark: ''
        }
    }
    componentWillMount(): void {
        this._initAddress()
    }
    _initAddress = async () => {
        this.setState({
            loading: true
        })
        const res = await API._fetch('getWithdrawAddress', {}, 'GET')
        // code: 10000
        // data:
        //     FCC: ""
        // HKDC: ""
        // __proto__: Object
        // msg: "获取信息成功"
        // status: 200
        this.setState({
            loading: false
        })
        if (res && res.code === 10000) {
            if (res.data.FCC.Address) {
                // 已经有地址
                this.setState({
                    isModify: true,
                    address: res.data.FCC.Address,
                    tempAddress: res.data.FCC.Address,
                    remark: res.data.FCC.Desc,
                    tempRemark: res.data.FCC.Desc
                })
            } else {
                // 还没有地址
                this.setState({
                    isAdd: true
                })
            }
        }
    }
    // 添加提币地址
    addAddress = async () => {
        this.setState({
            loading: true,
            rechargeConfirm: false
        })
        const reqData = {
            token: 'fcc',
            address: this.state.address,
            desc: this.state.remark
        }
        const res = await API._fetch('newWithdrawAddress', reqData)
        this.setState({
            loading: false
        })
        if (res.code === 10000) {
            setTimeout(() => {
                DeviceEventEmitter.emit('refresh_wd_address');
                this.props.navigation.goBack()
            }, 0)
        }
    }
    // 更新充币地址
    updateAddress = async () => {
        this.setState({
            loading: true,
            updateConfirm: false
        })
        const res2 = await API._fetch('editWithdrawAddress', { token: 'fcc', address: this.state.tempAddress, desc: this.state.tempRemark })
        this.setState({
            loading: false
        })
        if (res2.code === 10000) {
            setTimeout(() => {
                DeviceEventEmitter.emit('refresh_wd_address');
                this.props.navigation.goBack()
            }, 0)
        }
    }
    // 格式检查
    verifyAddress = () => {
        if (!this.state.address) {
            this.refs.toast.show(i18n.t('plz_cpl'))
            return
        }
        if (this.state.address.length != 42) {
            this.refs.toast.show(i18n.t('fmt_disc'))
            return
        }
        this.setState({
            rechargeConfirm: true
        })
    }
    // 更新格式检查
    verifyUpdateAddress = () => {
        if (!this.state.tempAddress) {
            this.refs.toast.show(i18n.t('flz_addr'))
            return
        }
        if (this.state.tempAddress.length != 42) {
            this.refs.toast.show(i18n.t('fmt_disc'))
            return
        }
        this.setState({
            updateConfirm: true
        })
    }
    render() {
        return (
            <View style={[base.flex_1, base.container, { backgroundColor: '#fff' }]}>
                {/*添加新充币地址*/}
                <Confirm
                    title={i18n.t('info')}
                    negative={i18n.t('cancel')}
                    positive={i18n.t('confirm')}
                    modalVisible={this.state.rechargeConfirm}
                    handleCancelOrder={() => this.setState({ rechargeConfirm: false })}
                    handleConfirmOrder={this.addAddress}
                >
                    <View style={[base.flex_1, base.flex_col_center]}>
                        <Text>{ i18n.t('info17') }</Text>
                    </View>
                </Confirm>
                {/*更新充币地址*/}
                <Confirm
                    title={i18n.t('info')}
                    negative={i18n.t('cancel')}
                    positive={i18n.t('confirm')}
                    modalVisible={this.state.updateConfirm}
                    handleCancelOrder={() => this.setState({ updateConfirm: false })}
                    handleConfirmOrder={this.updateAddress}
                >
                    <View style={[base.flex_1, base.flex_col_center]}>
                        <Text>{ i18n.t('info18') }</Text>
                    </View>
                </Confirm>
                {/*toast*/}
                <Toast ref="toast" position='bottom' positionValue={200}/>
                { this.state.loading ? (
                <View style={[base.flex_1, base.flex_col_center, base.bg_white]}>
                    <ActivityIndicator size="large" color="#ff7606" />
                    <View style={{paddingTop: 15}}>
                        <Text style={[base.color_orange]}>{ i18n.t('loading') }</Text>
                    </View>
                </View>
                    ) : null }
                <View style={[base.content_container, { backgroundColor: '#fff' }]}>
                    {/*an item*/}
                    <View style={{width: '100%'}}>
                        <View style={{ height: 50, paddingTop: 10, justifyContent: 'center' }}>
                            <Text style={{ fontSize: 16 }}>{ i18n.t('c_type') }</Text>
                        </View>
                        <View style={{width: '100%'}}>
                            <TextInput
                                underlineColorAndroid="transparent"
                                style={{borderColor: '#e5e5e5', width: '100%', backgroundColor: '#eee', borderWidth: 0.5, borderRadius: 3, height: 50, paddingLeft: 15}}
                                // placeholder={i18n.t('')}
                                value={'FCC'}
                                multiline={true}
                                editable={false}
                            />
                        </View>
                    </View>
                    <View style={{ width: '100%' }}>
                        <View style={{ height: 50, paddingTop: 10, justifyContent: 'center' }}>
                            <Text style={{ fontSize: 16 }}>{ i18n.t('wd_addr') }</Text>
                        </View>
                        { this.state.isAdd ? (
                            <View style={[base.flex_col_center, { width: '100%' }]}>
                                <TextInput
                                    underlineColorAndroid="transparent"
                                    style={{borderColor: '#e5e5e5', width: '100%', borderWidth: 0.5, borderRadius: 3, paddingHorizontal: 15, paddingVertical: 20}}
                                    placeholder={ i18n.t('wd_addr') }
                                    onChangeText={(text) => this.setState({address: text})}
                                    value={this.state.address}
                                />
                                <View style={[base.flex_row_start, { width: '100%', paddingTop: 10, justifyContent: 'flex-start' }]}>
                                    <Text style={{ fontSize: 16, textAlign: 'left' }}>{ i18n.t('remark1') } :</Text>
                                </View>
                                <TextInput
                                    underlineColorAndroid="transparent"
                                    style={{borderColor: '#e5e5e5',width: '100%', marginTop: 15, borderWidth: 0.5, borderRadius: 3, paddingHorizontal: 15, paddingVertical: 20}}
                                    placeholder={i18n.t('remark1')}
                                    onChangeText={(text) => this.setState({remark: text})}
                                    value={this.state.remark}
                                />
                            </View>
                        ) : ( this.state.isModifying ? (
                            <View style={[base.flex_col_center]}>
                                <TextInput
                                    underlineColorAndroid="transparent"
                                    style={{borderColor: '#e5e5e5', width: '100%', borderWidth: 0.5, borderRadius: 3, paddingHorizontal: 15, paddingVertical: 20}}
                                    placeholder={''}
                                    onChangeText={(text) => this.setState({tempAddress: text})}
                                    value={this.state.tempAddress}
                                />
                                <View style={[base.flex_row_start, { width: '100%', paddingTop: 10 }]}>
                                    <Text style={{ fontSize: 16 }}>{ i18n.t('remark1') }:</Text>
                                </View>
                                <TextInput
                                    underlineColorAndroid="transparent"
                                    style={{borderColor: '#e5e5e5',width: '100%', marginTop: 15, borderWidth: 0.5, borderRadius: 3, paddingHorizontal: 15, paddingVertical: 20}}
                                    placeholder={i18n.t('remark1')}
                                    onChangeText={(text) => this.setState({tempRemark: text})}
                                    value={this.state.tempRemark}
                                />
                            </View>
                        ) :
                            <View style={[base.flex_col_center, { width: '100%' }]}>
                                <TextInput
                                    underlineColorAndroid="transparent"
                                    style={{borderColor: '#e5e5e5', width: '100%', backgroundColor: '#eee', borderWidth: 0.5, borderRadius: 3, paddingHorizontal: 15, paddingVertical: 20}}
                                    placeholder={i18n.t('wd_addr')}
                                    onChangeText={(text) => this.setState({address: text})}
                                    value={this.state.address}
                                    multiline={true}
                                    editable={false}
                                />
                                <View style={[base.flex_row_start, { width: '100%', paddingTop: 10 }]}>
                                    <Text style={{ fontSize: 16 }}>{ i18n.t('remark1') }:</Text>
                                </View>
                                <TextInput
                                    underlineColorAndroid="transparent"
                                    style={{borderColor: '#e5e5e5', width: '100%', marginTop: 15, backgroundColor: '#eee', borderWidth: 0.5, borderRadius: 3, paddingHorizontal: 15, paddingVertical: 20}}
                                    placeholder={ i18n.t('remark') }
                                    onChangeText={(text) => this.setState({remark: text})}
                                    value={this.state.remark}
                                    multiline={true}
                                    editable={false}
                                />
                            </View> )
                            }
                    </View>
                    {/*<View style={{ width: '100%', height: 100, paddingVertical: 15, paddingHorizontal: 20 }}>*/}
                        {/*<CheckBox*/}
                            {/*style={{flex: 1, padding: 10}}*/}
                            {/*onClick={() => {*/}
                                {/*this.setState({*/}
                                    {/*isChecked: !this.state.isChecked*/}
                                {/*})*/}
                            {/*}}*/}
                            {/*rightText={'我承诺我已确认要新增用于充币的地址，并再次确认地址正确，如若用于充币的地址错误，风险自担。'}*/}
                            {/*isChecked={this.state.isChecked}*/}
                            {/*rightTextStyle={{color: '#b3b3b3'}}*/}
                            {/*checkBoxColor={'#ff7606'}*/}
                        {/*/>*/}
                    {/*</View>*/}
                </View>
                <View style={[base.flex_1, { justifyContent: 'center', alignItems: 'center' }]}>
                    {/*修改按钮*/}
                    { this.state.isModify && !this.state.isModifying ? (
                        <TouchableOpacity style={{width: '80%'}} onPress={() => this.setState({ isModifying: true })}>
                            <LinearGradient
                                start={{x: 0, y: 0}}
                                end={{x: 1, y: 1}}
                                colors={['#feac1c', '#ff7506']}
                                style={{ width: '100%', height: 50, borderRadius: 25, justifyContent: 'center', alignItems: 'center' }}
                            >
                                <Text style={{color: '#fff'}}>{ i18n.t('modify') }</Text>
                            </LinearGradient>
                        </TouchableOpacity>
                    ) : null }
                    { this.state.isModifying ? (
                        <View style={[base.flex_col_center, { width: '100%' }]}>
                            <TouchableOpacity onPress={() => this.verifyUpdateAddress()} style={{width: '80%'}}>
                                <LinearGradient
                                    start={{x: 0, y: 0}}
                                    end={{x: 1, y: 1}}
                                    colors={['#feac1c', '#ff7506']}
                                    style={{ width: '100%', height: 50, borderRadius: 25, justifyContent: 'center', alignItems: 'center' }}
                                >
                                    <Text style={{color: '#fff'}}>{ i18n.t('confirm') }</Text>
                                </LinearGradient>
                            </TouchableOpacity>
                            <TouchableOpacity style={{width: '80%', marginTop: 20}} onPress={() => this.setState({ isModify: true, isModifying: false })}>
                                <View
                                    colors={['#fff', '#fff']}
                                    style={{ width: '100%', height: 50, borderWidth: 0.5, borderColor: '#eee', borderRadius: 25, justifyContent: 'center', alignItems: 'center' }}
                                >
                                    <Text style={{color: '#808080'}}>{ i18n.t('cancel') }</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    ) : null }
                    {/*添加按钮*/}
                    { this.state.isAdd ? (
                        <TouchableOpacity style={{width: '80%'}} onPress={this.verifyAddress}>
                            <LinearGradient
                                start={{x: 0, y: 0}}
                                end={{x: 1, y: 1}}
                                colors={['#feac1c', '#ff7506']}
                                style={{ width: '100%', height: 50, borderRadius: 25, justifyContent: 'center', alignItems: 'center' }}
                            >
                                <Text style={{color: '#fff'}}>{ i18n.t('add') }</Text>
                            </LinearGradient>
                        </TouchableOpacity>
                    ) : null }
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
